<template>
  <div>
    <div>
      <el-form label-width="80px" :inline="true">
        <el-form-item label="门店名称" prop="name">
          <el-select
            v-model="selectInput"
            filterable
            placeholder="门店名称"
            remote
            reserve-keyword
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="Plus" type="primary" @click="addShop">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <BasePageTable
      :table-data="selectLst"
      :table-columns-data="tableColumnsData"
      style="height: 600px; margin-top: 10px"
    >
      <template #operation="scope">
        <el-button link type="danger" @click="delShop(scope.row.companyId)">删除</el-button>
      </template>
    </BasePageTable>
  </div>
</template>
<script setup>
import listApi from "@/api/coupon/couponList";

const selectInput = ref([]);
const loading = ref(false);
const options = ref([]);
const props = defineProps({
  tableData: {
    type: Array,
    default: [],
  },
});
const selectLst = ref(props.tableData);
const emit = defineEmits(["update:tableData"]);

const tableColumnsData = ref([
  {
    prop: "companyId",
    label: "序号",
    showOverflowTooltip: true,
    width: 100,
  },
  {
    prop: "companyName",
    label: "门店名称",
    showOverflowTooltip: true,
  },
  {
    prop: "operation",
    label: "操作",
    width: 100,
    align: "center",
    fixed: "right",
    customSlot: "operation", // 自定义插槽名称
  },
]);
const remoteMethod = (query) => {
  if (query) {
    loading.value = true;
    try {
      listApi.getShopList(query).then((res) => {
        options.value = res;
        console.log(res);
      });
      return true;
    } finally {
      loading.value = false;
    }
  } else {
    options.value = [];
  }
};
function addShop() {
  const isExist = selectLst.value.some((item) => item.companyId === selectInput.value);
  if (isExist == false) {
    for (let j = 0; j < options.value.length; j++) {
      if (options.value[j].companyId == selectInput.value) {
        selectLst.value.push(options.value[j]);
      }
    }
  } else {
    ElMessage.warning("门店已存在");
  }
}
const delShop = (id) => {
  for (let i = 0; i < selectLst.value.length; i++) {
    if (selectLst.value[i].companyId == id) {
      selectLst.value.splice(i, 1);
    }
  }
};
// const emitChange = () => {
//   emit("change", {

//   });
// };
</script>
